<template>
  <div>
    <el-dialog title="添加角色" :visible.sync="popup.flag" @opened="opened">
      <el-form :model="form">
        <el-form-item label="角色名称" :label-width="formLabelWidth">
          <el-input v-model="form.rolename" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="角色权限" :label-width="formLabelWidth">
          <el-tree
            :data="menulist"
            show-checkbox
            node-key="id"
            :props="defaultProps"
            ref="childArr"
          ></el-tree>
        </el-form-item>
        <el-form-item label="是否启用" :label-width="formLabelWidth">
          <el-tooltip>
            <el-switch
              v-model="form.status"
              active-color="#13ce66"
              inactive-color="#ff4949"
              :active-value="1"
              :inactive-value="2"
            >
            </el-switch>
          </el-tooltip>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="popup.flag = false">取 消</el-button>
        <el-button type="primary" @click="addrole">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: ["popup",],
  data() {
    return {
      form: {
        // 表单数据
        rolename: "",
        menus: "",
        status: 2,
      },
      defaultProps: {
        // 树状图配置项
        children: "children",
        label: "title",
      },
      menulist: [], // 菜单数据
      formLabelWidth: "120px",
      backfillArr: [],
      keysId:{
        keysIdArr:[]
      }
    };
  },
  computed: {},
  created() {
    this.initial();
  },
  mounted() {
  },
  watch: {
    popup: {
      deep: true,
      handler: function (newval) {
        if (newval.flag == false) {
          this.form = {
            rolename: "",
            menus: "",
            status: 2,
          };
          console.log(this.$refs.childArr);
          this.$refs.childArr.setCheckedKeys([]);
          this.initial();
        }
      },
    },
  },
  updated(){
  },
  methods: {
    addrole() { // 确认事件
      let checkArr = this.$refs.childArr.getCheckedNodes(false, true);
      // console.log(checkArr);
      let checkId = checkArr.map((item) => item.id);
      checkId = checkId.join(",");
      this.form.menus = JSON.parse(JSON.stringify(checkId));
      // 确认事件
      if (this.form.rolename == "") {
        this.$message.error("请您填写正确的信息");
        return;
      } else {
        (this.form.id
          ? this.$api.postroleedit(this.form) // 编辑
          : this.$api.postroleadd(this.form)
        ) // 添加
          .then((res) => {
            this.$message({
              showClose: true,
              message: "恭喜操作成功",
              type: "success",
            });
            this.$emit("getlist");
          });
      }
      this.popup.flag = false;
    },
    initial() {
      // 菜单列表
      this.$api.getmenulist({ istree: true }).then((res) => {
        this.menulist = res.data.list;
      });
    },
    opened(){ // 完全加载后
      this.$refs.childArr.setCheckedKeys(this.keysId.keysIdArr);

    }
  },
  components: {},
};
</script>

<style scoped lang="scss">
</style>
